import React, { useEffect, useState, useCallback } from 'react';
import { postBcxtWxUserInfoQuery, deleteBcxtWxUserInfoDelete } from '../api'
import SelectModule from './components/SelectModule';
import AddModule from './components/AddModule'
import ButtonAdd from '../../../assets/image/icon/add.png';
import { AppletAccountNumberAll, AppletAccountNumberTop, AppletAccountNumberContent } from './style';
import { PageHeader, Button, message, Table, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

/**
 * @description: 设置中心 -- 小程序账号
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-11*21） 创建
 */

const AppletAccountNumber = () => {
    const [listData, setListData] = useState([]);
    const [pagingData, setPagingData] = useState({
        currentPage: 1,
        size: 10,
        total: 0
    })
    const [selectData, setSelectData] = useState({}); //搜索data
    const [addModuleShow, setAddModuleShow] = useState(false);
    const [clickId, setClickId] = useState(undefined);
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            ; (async () => {
                const { code, msg, data } = await postBcxtWxUserInfoQuery(parames);
                if (code === '20000') {
                    setListData(data.records);
                    setPagingData({
                        currentPage: parames.currentPage,
                        size: parames.size,
                        total: data.total
                    });
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    useEffect(() => {
        listFun();
    }, [listFun]);
    //搜索-- 搜索
    const handleSelectModuleOk = values => {
        const parames = {
            currentPage: 1,
            size: 10,
            ...values
        }
        setSelectData(values)
        listFun(parames);
    }
    //搜索-- 重置
    const handleSelectModuleReset = () => {
        listFun();
    }
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${pagingData.total}条`,
        //每页条数
        pageSize: pagingData.size,
        //当前页数
        current: pagingData.currentPage,
        //数据总数
        total: pagingData.total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: pageSizeFun,
            ...selectData
        }
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size: pagingData.size,
            ...selectData
        }
        listFun(parames);
    }
    //添加反馈
    const handleAdd = () => {
        setAddModuleShow(true);
    }
    //修改
    const handleChange = id => {
        setAddModuleShow(true);
        setClickId(id);
    }
    //作废反馈
    const handleDelete = id => {
        confirm({
            title: '确定要删除吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                ; (async () => {
                    const { code, msg } = await deleteBcxtWxUserInfoDelete({ id });
                    if (code === '20000') {
                        message.success('删除账号成功！');
                        const parames = {
                            currentPage: pagingData.currentPage,
                            size: pagingData.size,
                            ...selectData
                        }
                        listFun(parames);
                    } else {
                        message.error(msg);
                    }
                })();
            }
        });

    }
    const columns = [
        {
            title: '序号',
            align: 'center',
            width: '60px',
            render: (text, recode, index) => <span>{index + 1}</span>
        },
        {
            title: '微信用户',
            align: 'center',
            dataIndex: 'wxName'
        },
        {
            title: '微信手机号',
            align: 'center',
            dataIndex: 'wxMobile'
        },
        {
            title: '最近登录时间',
            align: 'center',
            dataIndex: 'lastTime'
        },
        {
            title: '操作',
            align: 'center',
            render: (text, recode) => <>
                <Button type="link" onClick={() => handleChange(recode.id)}>修改</Button>
                <Button type="link" onClick={() => handleDelete(recode.id)}>删除</Button>
            </>
        },

    ];
    return <AppletAccountNumberAll>
        <AppletAccountNumberTop>
            <SelectModule
                handleSelectModuleOk={handleSelectModuleOk}
                handleSelectModuleReset={handleSelectModuleReset}
            />
        </AppletAccountNumberTop>
        <AppletAccountNumberContent>
            <PageHeader
                className="site-page-header"
                title="全部列表"
                extra={[
                    <Button
                        key="1"
                        type="primary"
                        ghost
                        icon={<img style={{ width: '13px', height: '13px', margin: '-4px 10px 0 0' }} src={ButtonAdd} alt='添加按钮icon' />}
                        onClick={() => handleAdd()}
                    >
                        添加
                    </Button>,
                ]}
            />
            <Table dataSource={listData} columns={columns} rowKey='id' pagination={pagination} />
        </AppletAccountNumberContent>
        <AddModule
            setAddModuleShow={setAddModuleShow}
            addModuleShow={addModuleShow}
            listFun={listFun}
            clickId={clickId}
            setClickId={setClickId}
        />
    </AppletAccountNumberAll>
}

export default AppletAccountNumber;